<template>
  <div>
    <div class="box-img"><img src="../../assets/images/us1.jpg" alt="" /></div>
    <!-- 服务项目 -->

    <div class="bj">
      <xtltie :xtitle="xtitle"></xtltie>

      <div class="content-list">
        <ul>
          <li>
            <div class="c-l-img">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-text">
              <h3>紫金瓶</h3>
              <div><span>规格：</span> 500ml/瓶</div>
              <p>
                <span>特点: </span>
                &nbsp;&nbsp;&nbsp;钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <div class="box-price">
                <span><span>￥</span><span>164-864</span></span>
                <button>立即制定</button>
              </div>
            </div>
          </li>
          <li>
            <div class="c-l-img">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-text">
              <h3>紫金瓶</h3>
              <div><span>规格：</span> 500ml/瓶</div>
              <p>
                <span>特点: </span>
                &nbsp;&nbsp;&nbsp;钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <div class="box-price">
                <span><span>￥</span><span>164-864</span></span>
                <button>立即制定</button>
              </div>
            </div>
          </li>
          <li>
            <div class="c-l-img">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-text">
              <h3>紫金瓶</h3>
              <div><span>规格：</span> 500ml/瓶</div>
              <p>
                <span>特点: </span>
                &nbsp;&nbsp;&nbsp;钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <div class="box-price">
                <span><span>￥</span><span>164-864</span></span>
                <button>立即制定</button>
              </div>
            </div>
          </li>
          <li>
            <div class="c-l-img">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-text">
              <h3>紫金瓶</h3>
              <div><span>规格：</span> 500ml/瓶</div>
              <p>
                <span>特点: </span>
                &nbsp;&nbsp;&nbsp;钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <div class="box-price">
                <span><span>￥</span><span>164-864</span></span>
                <button>立即制定</button>
              </div>
            </div>
          </li>
          <li>
            <div class="c-l-img">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-text">
              <h3>紫金瓶</h3>
              <div><span>规格：</span> 500ml/瓶</div>
              <p>
                <span>特点: </span>
                &nbsp;&nbsp;&nbsp;钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <div class="box-price">
                <span><span>￥</span><span>164-864</span></span>
                <button>立即制定</button>
              </div>
            </div>
          </li>
          <li>
            <div class="c-l-img">
              <img src="../../assets/images/jianzhuang.jpg" alt="" />
            </div>
            <div class="c-l-text">
              <h3>紫金瓶</h3>
              <div><span>规格：</span> 500ml/瓶</div>
              <p>
                <span>特点: </span>
                &nbsp;&nbsp;&nbsp;钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存
                年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高
                档性、稀缺性、增值性等特征，凸现珍贵的收臧价值。
              </p>
              <div class="box-price">
                <span><span>￥</span><span>164-864</span></span>
                <button>立即制定</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 底部导航 -->
      <bottom-nav></bottom-nav>
    </div>
  </div>
</template>

<script>
import bottomNav from "../../components/bottomNav.vue";
//导入服务项目标题
import Xtltie from "../../components/Xtltie.vue";
export default {
  name: "formulate",
  //注册组件
  components: {
    Xtltie,
    bottomNav,
  },
  data() {
    return {
      checked: false,
      xtitle: {
        name: "制定系列",
        nameEnglish: "Custom series",
      },
    };
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1029px) {
  .box-img {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 6%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .content-list {
      width: 70%;
      margin: auto;
      padding-top: 98px;
      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 30%;
          border: 1px solid #d9d9d9;
          margin-bottom: 70px;
          .c-l-img {
            img {
              width: 100%;
            }
          }
          .c-l-text {
            padding: 10px;
            text-align: left;
            font-size: 16px;
            color: #000000;
            h3 {
              margin-bottom: 10px;
              font-size: 24px;
              font-weight: bold;
              color: #ca0000;
            }
            div,
            p {
              span {
                font-weight: bold;
              }
            }
            .box-price {
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #ca0000;
              span:nth-child(1) {
                font-size: 12px;
              }
              span:nth-child(2) {
                font-size: 18px;
              }
              button {
                width: 30%;
                height: 40px;
                color: #ffffff;
                background-color: #ca0000;
              }
            }
          }
        }
        li:hover {
          border: 1px solid #ce1113;
          box-shadow: 0px 10px 20px -12px #ce1113;
        }
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  .box-img {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 15%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .content-list {
      width: 98%;
      margin: auto;
      padding-top: 98px;

      ul {
        padding-bottom: 10%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 45%;
          border: 1px solid #d9d9d9;
          margin-bottom: 70px;
          .c-l-img {
            img {
              width: 100%;
            }
          }
          .c-l-text {
            padding: 10px;
            text-align: left;
            font-size: 16px;
            color: #000000;
            h3 {
              margin-bottom: 10px;
              font-size: 18px;
              font-weight: bold;
              color: #ca0000;
            }
            div,
            p {
              /* 1.溢出隐藏 */
              overflow: hidden;
              /* 2.用省略号来代替超出文本 */
              text-overflow: ellipsis;
              /* 3.设置盒子属性为-webkit-box  必须的 */
              display: -webkit-box;
              /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
              -webkit-line-clamp: 3;
              /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
              word-break: break-all;
              /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
              -webkit-box-orient: vertical;

              span {
                font-weight: bold;
              }
            }
            .box-price {
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #ca0000;
              span:nth-child(1) {
                font-size: 12px;
              }
              span:nth-child(2) {
                font-size: 18px;
              }
              button {
                width: 30%;
                height: 40px;
                color: #ffffff;
                background-color: #ca0000;
              }
            }
          }
        }
        li:hover {
          border: 1px solid #ce1113;
          box-shadow: 0px 10px 20px -12px #ce1113;
        }
      }
    }
  }
}
@media screen and (max-width: 749px) {
  .box-img {
    position: relative;
    margin-bottom: 10px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 16%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .content-list {
      ul {
        width: 98%;
        margin: auto;
        padding-top: 20px;
        li {
          display: flex;
          // padding: 35px;
          margin-bottom: 25px;
          border: 1px solid #f1f1f1;
          .c-l-img {
            width: 40%;
            // margin: auto;
            overflow: hidden;
            img {
              width: 100%;
              transform: scale(1.5);
            }
          }
          .c-l-text {
            width: 100%;
            margin-left: 10px;
            text-align: left;
            // line-height: 40px;
            .box-price {
              color: #b50003;
            }
            h3 {
              font-size: 14px;
              font-weight: bold;
              color: #b50003;
            }
            div {
              font-size: 14px;
              span:nth-child(1) {
                span:nth-child(1) {
                  font-weight: 600;
                }
              }
            }

            p {
              /* 1.溢出隐藏 */
              overflow: hidden;
              /* 2.用省略号来代替超出文本 */
              text-overflow: ellipsis;
              /* 3.设置盒子属性为-webkit-box  必须的 */
              display: -webkit-box;
              /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
              -webkit-line-clamp: 2;
              /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
              word-break: break-all;
              /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
              -webkit-box-orient: vertical;
              font-size: 14px;
              color: #444444;
              span {
                font-weight: 600;
              }
            }
            button {
              font-size: 12px;
              // margin-top: 10px;
              width: 25%;
              height: 20px;
              float: right;
              color: #ffffff;
              background-color: #ca0000;
            }
          }
        }
      }
    }
  }
}
</style>